<template>
	<view class="">
		<view class="commodityView">
			<image :src="commodity.img" mode="" class="commodityImg"></image>
			<view class="commodityInptre">
				<view class="commodityName">{{commodity.name}}</view>
				<uni-rate value="2" size="25" margin="8"></uni-rate>
			</view>
		</view>
		<textarea value="" placeholder="您的评价内容写在这里哦~" maxlength="500" class="textareaEv"/>
		<view class="">
			 <robby-image-upload v-bind:limit="limit" v-model="imageData" @delete="deleteImage" @add="addImage" :server-url-delete-image="serverUrlDeleteImage" :server-url="serverUrl"></robby-image-upload>
			<!-- <view v-for="(item,index) in imageData" :key="index" class="">
				{{index}}. {{item.substr(-14)}}
			</view> -->
		</view>
		<view class="evaluateLji" @click="evdiately()">立即评价</view>
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
		components: {uniRate,robbyImageUpload}, 
		 data() {
            return {
				commodity:{
					img:'../../../static/images/tianli.jpg',
					name:'我是商品名称我是商品名称我是商品名称我是商品名称'
				},
                enableDel : false,
                enableAdd : false,
                enableDrag : false,
                limit: 6,
                imageData : [],
                serverUrl: null,
                serverUrlDeleteImage: null,
                formData: {
                    userId: 2
                }
            } 
        },
		 methods:{
            deleteImage: function(e){
                console.log(e)
            },
            addImage: function(e){
                console.log(e)
            },
			evdiately(){
				uni.navigateTo({
					url:'evsuccess'
				})
			}
        }
		
	}
</script>

<style>
	.evaluateLji{
		width: 100%;
		padding: 20upx 0;
		text-align: center;
		background: #13b1eb;
		color: #fff;
		font-size: 36upx;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.textareaEv{
		width: 94%;
		padding: 20upx 3%;
		font-size: 32upx;
		border-bottom: 1upx solid #f0f0f0;
	}
	.commodityImg{
		width: 160upx;
		height: 160upx;
		border-radius: 10upx;
	}
	.commodityName{
		color: #333;
		font-size: 34upx;
		font-weight: bold;
		margin: 10upx 0upx 2upx 20upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.commodityView{
		display: flex;
		width: 94%;
		padding: 20upx 3%;
		border-bottom: 1upx solid #f0f0f0;
	}
	.commodityInptre{
		width: 70%;
	}
	.commodityInptre view{
		line-height: 1.8;
	}
</style>
